<template>
  <div class="app-container">
    <Row>
        <Col span="24"  style="overflow: auto;height: 680px;">
          <div class="box" >
            <div class="title_box">
              奶茶
            </div>
            <div class="item"   v-for="item in selections">
              <img :src="'http://localhost:8088'+item.imagePath" alt="" width="100" height="100">
              <div class="title">
              {{item.name}}
              </div>
              <div class="price">￥ {{item.price}}元</div>
              <el-button type="primary" style="margin-right: 50px;" @click="selectChange(item)">下 单</el-button>
            </div>
          </div>
        </Col>
    </Row>
   
  </div>
</template>

<script>
import { queryList, addOrder,getCost } from "@/api/getData.js";

export default {
  data() {
    return {
      loading: false,
      selections: [],
      orderList: [],
    };
  },

  mounted() {
    this.request();
  },
  methods: {
    //获取奶茶列表
    async request() {
      this.loading = true;
      queryList(this.queryParams).then(response => {
        this.selections = response.data;
        this.loading = false;
      });
    },
    //奶茶下单
    selectChange(item) {
      this.$modal.confirm('是否确认下单'+item.name).then(function() {
        return addOrder({
          goodsName:item.name,
          price:item.price,
        });
      }).then(() => {
        this.$modal.msgSuccess("下单成功");
      }).catch(() => {});
    },
  }
};
</script>

<style scoped>
.app-container{
  height: 100%;
}
.box{
  /* display: flex;
  justify-content: center; */
  padding: 20px;
}
.title_box{
  font-size: 20px;
}
.item{
  /* width: 200px; */
  height: 100px;
  border: 1px solid #2d8cf0;
  border-radius: 10px;
  margin-top: 15px;
  font-size: 22px;
  overflow: hidden;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title{
  width: 300px;
  text-align: left;
  margin-left: -280px;
}
.title1{
  width: 420px;
  text-align: left;
  margin-left: 20px;
}
.price{
  color: orange;
  margin-right: 20px;
}
.type-box{
  display: flex;
  justify-content: flex-start;
}
.type-btn{
  width: 60px;
  height: 22px;
  line-height: 22px;
  background: #2d8cf0;
  margin-right: 15px;
  text-align: center;
  color: #fff;
}
.activebtn{
  background: orange;
}
.btn-box{
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 19px;
}
.btn{
  margin-right: 20px;
}
</style>